const center = [104.1324, 36.92669]
var map = null
var mapDom = document.getElementById('map')
map = new mapboxgl.Map({
    accessToken: 'pk.eyJ1IjoibHp1bml1anAwOCIsImEiOiJjajJqcmlrMTYwMDI2MzJuaXd0NmRtZTl5In0.eMIg2fpiFaDInq2YVE4_2A',
    container: mapDom, // container ID
    style: 'mapbox://styles/mapbox/streets-v11', // style URL
    center: center, // starting position [lng, lat]
    zoom: 3,
    doubleClickZoom: false,
    hash: false,
    localFontFamily: true,
    logoPosition: 'bottom-right'
});

map.on('load', () => {
    const canvas = document.createElement('canvas')
    canvas.setAttribute('id', 'canvasID')
    map.getCanvasContainer().appendChild(canvas)
    canvas.width = map.getCanvas().width
    canvas.height = map.getCanvas().height
    const ctx = canvas.getContext('2d')

    // map.project([lon, lat])
    fetch("../data/capital.geojson").then(res => res.json()).then(res => {
        res = res.features
        res.forEach(r => {
            const coords = r.geometry.coordinates
            const p = map.project(coords)
            ctx.beginPath()
            ctx.arc(p.x, p.y, 5, 0, Math.PI * 2)
            ctx.fillStyle = 'red'
            ctx.fill()
        })
    })

    const bounds = map.getBounds().toArray()
    const [xmin, ymin] = bounds[0]
    const [xmax, ymax] = bounds[1]
    map.addSource('canvas-source', {
        type: 'canvas',
        canvas: 'canvasID',
        coordinates: [
            [xmin, ymax],
            [xmax, ymax],
            [xmax, ymin],
            [xmin, ymin]
        ],
        animate: true
    });

    map.addLayer({
        id: 'canvas-layer',
        type: 'raster',
        source: 'canvas-source'
    });

})